<template>
  <div class="aboutFee">
      <div class="tableDiv">
        <div class="tableTitle">
          <div>{{$t('exchange.exchangeUsdt')}}</div>
          <div>{{$t('exchange.feeBi')}}</div>
        </div>
        <div class="tableContent">
          <div class="tableItem">
             <div>
               <div>
                 <p>USDT</p>
                 <p class="chian">(EOS{{ $t('bosChain.chain') }})</p>
               </div>
               <i class="iconfont icon-huaban124 iconChain"></i>
               <div>
                 <p>USDT</p>
                 <p class="chian">(TRON{{ $t('bosChain.chain') }})</p>
               </div>
             </div>
             <div>{{$t('exchange.no')}}</div>
          </div>
          <div class="tableItem">
             <div>
               <div>
                 <p>USDT</p>
                 <p class="chian">(EOS{{ $t('bosChain.chain') }})</p>
               </div>
               <i class="iconfont icon-huaban124 iconChain"></i>
               <div>
                 <p>USDT</p>
                 <p class="chian">(ETH{{ $t('bosChain.chain') }})</p>
               </div>
             </div>
             <div class="ethFee">
                 <p>0.5 USDT</p>
                 <p class="chian">（ETH{{ $t('bosChain.chain') }}）</p>
             </div>
          </div>

        </div>
      </div>
      <div class="tipDiv">
        <div class="tip">{{$t('exchange.feeTip1',{coin:'TRON'})}}</div>
        <div class="tip">{{$t('exchange.feeTip2')}}</div>
      </div>
  </div>
</template>

<script>

export default {
  name: 'PopupFee', // 关于手续费
  props: {
    coin: String,
    popupFeeVisible: Boolean
  },
  data() {
    return {}
  },
  methods: {
    // 关闭弹窗
    handleOrder() {
      this.$emit('listenOrder', true)
    },
    handleClose() {
      this.$emit('listenClose', false)
    },
  }
}
</script>

<style lang="scss" scoped>

.aboutFee{
  // padding: 46px 26px 55px;
  box-sizing: border-box;
  position: relative;
  background: #fff;
  border-radius: 15px;

  .tableDiv{
    border: 1px solid #4A90E2;
    border-radius: 15px;
    .tableTitle{
      display: flex;
      background: #E9F2FF;
      border-radius: 15px 15px 0 0;
      color: #4A90E2;
      border-bottom: 1px solid #A8D0FF;
      &>div{
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 50px;
        border-right: 1px solid #A8D0FF;
        box-sizing: border-box;
        &:last-child{
          border-right: none;
        }
        // 特殊样式
        &:first-child{
          min-width: 200px;
          // background-color: #eee;
          border-radius: 0.15px 0 0 0;
        }
      }
    }
    .tableContent{
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: 0 0 15px 15px;
      color: #4A4A4A;
      &>.tableItem{
        display: flex;
        border-bottom: 1px solid #A8D0FF;
        &:last-child{
          border-bottom: none;
        }
        &>div{
          display: flex;
          align-items: center;
          justify-content: center;
          flex: 1;
          border-right: 1px solid #A8D0FF;
          padding: 10px 22px 10px;
          box-sizing: border-box;
          &:last-child{
            border-right: none;
          }
          // 特殊样式
          &:first-child{
            min-width: 200px;
          }
        }
      }
    }
  }

  .chian{
    // font-size: 18px;
    text-align: center;
    color: #9B9B9B;
  }
  .iconChain{
    color: #4A90E2;
    margin: 0 10px;
  }
  .ethFee{
    flex-direction: column;
  }
  .tipDiv{
    margin-top: 10px;
  }
  .tip{
    // margin: .17px .36px;
    color: #9B9B9B;
    // padding-left: 30px;
    position: relative;
    margin-bottom: 5px;

  // &::before{
  //   content: '';
  //   position: absolute;
  //   width: 4px;
  //   height: 4px;
  //   border-radius: 50%;
  //   background: #A6B6D7;
  //   left: 15px;
  //   top: 18px;
  //   transform: translate(-50%, -50%);
  //  }
  }
}
</style>
